<template>
  <div class="home">
    <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="content.circuit_types_number" placeholder="类型编号"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="content.circuit_types_name" placeholder="类型名称"></el-input>
      </el-form-item>
      <el-form-item >
         <el-select v-model="content.circuit_types_origin" clearable placeholder="机构类型">
            <!-- <el-option v-for="item in tableData1" :key="item.dwid" :label="item.dwname" :value="item.dwname">{{item.dwname}}</el-option> -->
            <el-option label="分公司" value="1">分公司</el-option>
            <el-option label="一级转运中心" value="2">一级转运中心</el-option>
            <el-option label="二级转运中心" value="3">二级转运中心</el-option>
            <el-option label="网点" value="4">网点</el-option>
          </el-select>
       </el-form-item>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >搜索</el-button>
          <el-button round type="primary" icon="el-icon-search" @click="onSubmit1"
          >重置</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >+新增线路类型</el-button>
    </el-container>
    <el-table 
    :data="tableData">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitTypesId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路类型编号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitTypesNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路类型名称" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitTypesName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起始机构类型" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 3px">
            <span v-if="scope.row.circuitTypesOrigin == 1">分公司</span>
            <span v-if="scope.row.circuitTypesOrigin == 2">一级转运中心</span>
            <span v-if="scope.row.circuitTypesOrigin == 3">二级转运中心</span>
            <span v-if="scope.row.circuitTypesOrigin == 4">网点</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="终点机构类型" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 3px">
            <span v-if="scope.row.circuitTypesDestination == 1">分公司</span>
            <span v-if="scope.row.circuitTypesDestination == 2">一级转运中心</span>
            <span v-if="scope.row.circuitTypesDestination == 3">二级转运中心</span>
            <span v-if="scope.row.circuitTypesDestination == 4">网点</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="最近更新时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: -10px">{{ scope.row.circuitTypesDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -10px">{{ scope.row.circuitTypesUpdateOne}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            style="margin-left: -12px"
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index,scope.row)"
            >编辑</el-button>
          <el-button
            style="margin-left: -12px"
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index,scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" >
        <el-form-item label="线路类型编号" prop="circuitTypesNumber" :label-width="formLabelWidth">
          <el-input v-model="form.circuitTypesNumber" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="线路类型名称" prop="circuitTypesName" :label-width="formLabelWidth">
          <el-input v-model="form.circuitTypesName" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="起始机构类型" prop="circuitTypesOrigin" :label-width="formLabelWidth">
         <el-select v-model="form.circuitTypesOrigin" placeholder="选择起始机构类型">
            <!-- <el-option v-for="item in tableData1" :key="item.dwid" :label="item.dwname"  :value="item.dwid">{{item.dwname}}</el-option> -->
            <el-option label="分公司" value="1">分公司</el-option>
            <el-option label="一级转运中心" value="2">一级转运中心</el-option>
            <el-option label="二级转运中心" value="3">二级转运中心</el-option>
            <el-option label="网点" value="4">网点</el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="终点机构类型" prop="circuitTypesDestination" :label-width="formLabelWidth">
         <el-select v-model="form.circuitTypesDestination" placeholder="选择终点机构类型">
            <!-- <el-option v-for="item in tableData1" :key="item.dwid" :label="item.dwname"  :value="item.dwid">{{item.dwname}}</el-option> -->
            <el-option label="分公司" value="1">分公司</el-option>
            <el-option label="一级转运中心" value="2">一级转运中心</el-option>
            <el-option label="二级转运中心" value="3">二级转运中心</el-option>
            <el-option label="网点" value="4">网点</el-option>
          </el-select>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updStu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data(){
    return{
      tableData:[],
      tableData1:[],
      total: 0,
      tclini:[],
      dialogFormVisible: false, //是否显示dialog，默认不显示
       formLabelWidth: "200px",
       bj:"",
      content: {
        page: 1,
        num: 2,
        circuit_types_number: "",
        circuit_types_name:"",
        circuit_types_origin:"",
      },
      form: {
        circuitTypesId:"",
        circuitTypesNumber:"",
        circuitTypesName:"",
        circuitTypesOrigin: "",
        circuitTypesDestination:"",
        circuitTypesDate: "",
        circuitTypesUpdateOne: "",
        circuitTypesStatus:"0",
      },
    }
  },
  methods:{
    load(){
      axios.post("/api/transshipment-tms-circuit-types/getPageList",this.content).then(data=>{
        this.tableData = data.data.rows; //获取分页数据
        this.total = data.data.total; //获取总记录数
      })
      // axios.get("/api/jzxx/findDw").then(data=>{
      //   this.tableData1=data.data;
      //   console.log(data.data)
      // })
    },
    handleEdit(index,row){
      this.form=row;
      this.form.did=parseInt(row.dwid);
      this.dialogFormVisible=true;
      this.bj=false;
    },
    handleDelete(index,row){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get("/api/transshipment-tms-circuit-types/delTmsCircuitTypes?id="+row.circuitTypesId).then(data=>{
            if(data.data){
                this.load();
            }else{
              this.$message({
              type: 'success',
              message: '删除失败!'
              })
            }
      })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     onSubmit(){
       this.load();
     },
    onSubmit1(){
      this.content.circuit_types_number="",
      this.content.circuit_types_name="",
      this.content.circuit_types_origin="",
      this.load();
    },
    add(){
      this.dialogFormVisible=true;
      this.bj=true;
      this.form={};
    },
    updStu(){
      let upd = new Date();
      var y = upd.getFullYear();
      var m = (upd.getMonth() + 1).toString().padStart(2, "0");
      var d = upd.getDate().toString().padStart(2, "0");
      var h = upd.getHours().toString().padStart(2,"0");
      var mi=upd.getMinutes().toString().padStart(2,"0");
      var s=upd.getSeconds().toString().padStart(2,"0");
      var tim = y + "-" + m + "-" + d +" "+h+":"+mi+":"+s;
      if(this.bj){
        this.form.circuitTypesDate=tim;
        axios.post("/api/transshipment-tms-circuit-types/addTmsCircuitTypes",this.form).then(data=>{
          if(data.data){
             this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }else{
        this.form.circuitTypesDate=tim;
        axios.post("/api/transshipment-tms-circuit-types/updTmsCircuitTypes",this.form).then(data=>{
          if(data.data){
             this.$message({
             message: '恭喜你，修改成功',
             type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }
    },
    handleSizeChange(val){
       this.content.num = val;
       this.load();
    },
    handleCurrentChange(val){
       this.content.page = val;
       this.load();
    },
  },
  created(){
    this.load();
   },
})
</script>
